/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 13:53:16
 * @LastEditors: dh
 * @LastEditTime: 2022-04-13 11:49:02
 */

// .get() 选出指定索引的dom元素  0 = 第一位、 -1 = 最后一位、
var dom = $('#demo ul>li').get(0)
var dom = $('#demo ul>li').get(-1)
// 或
var dom = $('#demo ul>li')[0]

// .eq() 选出指定索引的jq元素  0 = 第一位、 -1 = 最后一位、
var dom = $('#demo ul>li').eq(0)
var dom = $('#demo ul>li').eq(-1)

// .find() 可以链式操作，选出子元素、
$('.wrapper').css({ position: 'relative' }).find('ul').css({ listStyle: 'neno' }).find('li').css({ backgroundColor: '#ccc' })

// .prevObject对象  prevObject对象是上一个(父级)被选择的dom对象(ul)，$('.wrapper').find('ul')
$('.wrapper').find('ul').find('li').prevObject

// .end() 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
$('.wrapper').find('ul').end() // 返回.wrapper
$('.wrapper').add('ul').end() // 返回.wrapper

// .filter(str)  基于li筛选出带class="demo"属性的li.demo元素、
$('.wrapper').find('ul').find('li').filter('.demo')

// .filter(fun) 逐个遍历元素、
$('.wrapper ul>li').filter(function (index, ele) {
	// 这里输出的ele是原生的dom对象、
	console.log(index, ele)
	// 返回true留下、false排除、返回后domArr会包裹jQuery对象、
	return index == 0 // 第一个
})

// .not(fun) 作用一样，但与filter()相反
$('.wrapper ul>li').not(function (index, ele) {
	// 这里输出的ele是原生的dom对象、
	console.log(index, ele)
	// 返回false留下、true排除、返回后domArr会包裹jQuery对象、
	return index == 0 // 选出非第一个、
})

// .is(expr|obj|ele|fn)  根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
$('.wrapper ul').click(function (e) {
	// 事件委托、e.target —— 事件原对象(li)、
	if ($(e.target).is('li')) {
		alert($(e.target).text())
	} else {
		alert($(this).text())
	}
})

// .add() 元素叠加 相当于css选择 .wrapper,ul
$('.wrapper').add('ul').css({ color: 'red' })

// 属性选择器
$('[name]') // 属性为name的
$('input[name=test]') // 属性等于test的
$('input[name!=test]') // 属性不等于test的
$('input[name^=test]') // 属性已test开始的
$('input[name$=test]') // 属性已test结束的
$('input[name*=test]') // 属性含有test的

// 伪类选择器
$('input:disabled') // 禁用的
$('input:enabled') // 可用的
$('input:checked') // 多选选中的
$('select:selected') // 下拉选中的
$('input:force') // 聚焦的
$('input:first') // 第一个
$('input:last') // 最后一个
$('input:even') // 索引为偶数
$('input:odd') // 索引为奇数
$('input:eq(2)') // 索引===2
$('input:gt(2)') // 索引>2
$('input:lt(2)') // 索引<2
$('p:contains(test)') // 内容包含test的p
$('p:empty') // 空内容的p
$('p:has(span)') // 包含span标签的p
$('p:parent') //
$('p:hidden') // 不可见的
$('p:visible') // 可见的
